import React from "react"
import "./style.less"

export default class Tabs extends React.Component{

  constructor(){
    super();
      this.state = {
        currentIndex: 1
      }
  }
  clickHandle(index){
    this.setState({
      currentIndex: index
    })
  }
  render (){
    let { currentIndex } = this.state;
    return (
      <div>
        <div className="tabs-title-container">
          {
            React.Children.map(this.props.children,(ele,index) => {
              return (
                <div onClick={this.clickHandle.bind(this,index)}
                className={currentIndex===index?"active":""}
                >
                  {ele.props.tabtitle}
                </div>
              )
            })
          }
        </div>
        <div className="tabs-content-container">
          {
            React.Children.map(this.props.children,(ele,index) => {
              return (
                <div className={currentIndex===index?"tabs-item show":"tabs-item"}>{ele}</div>
              )
            })
          }
        </div>
      </div>
    )
  }

}

